上一篇文章：MIS2000Lab.的「HTML5 從零開始」#20--Session storage
http://ithelp.ithome.com.tw/question/10160001

前面介紹的Session storage是「暫存性的資料」，
而Local storage則沒有期限的限制、或是瀏覽器被關閉以後仍會存在（存放在Client端的檔案系統內）。

當然，可以在瀏覽器裡面設定是否要移除這些資訊，或是關閉瀏覽器的同時就立即清除這些資訊。

”不同網站”產生的Local storage是”無法”共用的！

您可以透過以下的JavaScript測試一下您正在使用的瀏覽器是否支援local storage功能：

if( window.localStorage ){
...
}

註解：為了方便使用，Local storage可以直接在程式裡面呼叫，不需要在前面加上window物件，例如：window.localStorage。

//註解：myKey就是自己定義的key值。

方法一：
localStorage.setItem("myKey","即將儲存的資訊文字");
var textData = localStorage.getItem("myKey");

方法二：
localStorage["myKey"] = "即將儲存的資訊文字";
var textData = localStorage["myKey"];

方法三：
localStorage.myKey = "即將儲存的資訊文字";
var textData = localStorage.myKey;

跟上一篇文章的範例完全相同，MIS2000Lab.的「HTML5 從零開始」#20--Session storage
只是把Session Storage改成 Local Storage

您就可以看見「執行成果」的變化...從範例裡面學習、直接看成果，一目了然！

[img=415,414]http://ithelp.ithome.com.tw/upload/images/20141016/20141016103301543f2e5ded42d_resize_600.jpg[/img]

==== 屬性與方法 ====

Session storage與Local storage都支援下列屬性和方法。

.clear()方法 從 Web存放區移除所有key值組。
constructor 將參照傳回物件建構函式。
.getItem()方法 擷取（讀取）與 Web存放區裡面索引鍵關聯的目前值。
key()方法 抓取集合中指定索引的索引鍵。
length 抓取key值清單的長度。
remainingSpace 抓取儲存物件的剩餘記憶體空間（單位：位元組）。
.removeItem()方法 從 Web存放區集合刪除key值組。
.setItem()方法 設定（寫入）key值組。

==== 處理Storage事件 ====

storage API有session與local storage兩者。

您可以透過這個事件提示網頁，在儲存區裡面的資料已經被異動了。當資料被修改時就會觸發這個事件。程式碼的範例如下：

function myStorageCallback( e ) {
  alert("原本的Key值:" + e.key + ",內容已經改成:" + e.newValue);
}

window.addEventListener("storage", myStorageCallback, true);

從事件物件傳給事件處理器，共有屬性如下：
 key：
 oldValue：改變以前的（舊）數值。
 newValue：將要改變的（新）數值。
 url：script程式碼。
 storageArea：storage將使用session或是local。

不要走開，馬上回來

下一篇文章：Indexed Database API
http://ithelp.ithome.com.tw/question/10160292

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110